<template>
	<view class="page">
		<view class="main">
			<view class="goods-main" v-for="(item,index) in mealData" :key="index">
				<view class="nav">
					<view class="icon"></view>
					<view class="title">{{item.title}} (可选1份)</view>
				</view>
				<view class="goods-wrap">
					<view class="goods-list" v-for="(item2,index2) in item.goods" :key="item2.gid"
						@click="selectGoods(index,index2)">
						<view class="image">
							<image :src="item2.image" alt=""></image>
						</view>
						<view class="text">{{item2.title}}</view>
						<view class="price" v-if="item2.offset_price!=0">
							{{item2.offset_price>0?"+"+item2.offset_price:item2.offset_price}} 元
						</view>
						<view :class="{elc:true, active:item2.active}"></view>
					</view>
				</view>
			</view>
		</view>
		<view style="width:100%;height:120rpx;"></view>
		<view class="cart-main">
			<view class="total">小计：￥{{total}}</view>
			<view class="line"></view>
			<view class="cart" @click="addCart">
				<view class="cart-icon"></view>
				<view class="text">加入购物车 ></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	export default {
		name: "meal",
		onLoad(opts) {
			//分店的id
			this.branch_shop_id = opts.branch_shop_id ? opts.branch_shop_id : "";
			//菜品的id
			this.gid = opts.gid ? opts.gid : "";
			//桌号
			this.table_code = opts.table_code ? opts.table_code : "";
			//获取套餐数据
			this.getMeal({
				branch_shop_id: this.branch_shop_id,
				gid: this.gid
			});
			//获取套餐详情
			this.getMealDetails({
				branch_shop_id: this.branch_shop_id,
				gid: this.gid,
				success: () => {
					uni.setNavigationBarTitle({
						title: this.title
					})
				}
			});

		},
		methods: {
			...mapActions({
				getMeal: "meal/getMeal",
				getMealDetails: "meal/getMealDetails"
			}),
			//选择菜品
			selectGoods(index, index2) {
				for (let i = 0; i < this.mealData[index].goods.length; i++) {
					if (this.mealData[index].goods[i].active) {
						this.mealData[index].goods[i].active = false;
						break;
					}
				}
				this.mealData[index].goods[index2].active = true;
				this.$set(this.mealData[index].goods, index2, this.mealData[index].goods[index2]);
				this.setMealItems();
			},
			//添加购物车
			addCart() {
				this.$utils.safeUser(this, this.branch_shop_id, this.table_code, () => {
					if (this.isSubmit) {
						this.isSubmit = false;
						//添加购物车数据到vuex
						let cartData = {
							"title": this.title, //菜品和套餐的名称
							"branch_shop_id": this.branch_shop_id, //分店的id
							"table_code": this.table_code, //桌号
							"gid": this.gid, //套餐的唯一标识
							"price": this.total, //价格
							"amount": 1, //菜品的数量
							"is_meal": 1, //是否套餐
							"meal_type": 1, //套餐的类型。0：普通套餐，1：自定义套餐
							"meal_items": this.mealItems, //套餐里菜品的明细
							"new_meal_items": this.simpleMealItems, //套餐里菜品明细的gid
							"isAmountInput": false, //是否显示数量input输入框
							"isAmountInputFocus": false, //是否获取input焦点
						};
						this.asyncAddCart({
							cartData,
							success: () => {
								uni.showToast({
									title: "加入购物车成功！",
									icon: "success",
									duration: 2000
								});
								setTimeout(() => {
									this.isSubmit = true;
									uni.hideToast();
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}
						})
					}
				})
			},
			//组装套餐菜品明细
			setMealItems() {
				let mealItems = [];
				if (this.mealData.length) {
					for (let i = 0; i < this.mealData.length; i++) {
						for (let j = 0; j < this.mealData[i].goods.length; j++) {
							//如果选择了菜品
							if (this.mealData[i].goods[j].active) {
								mealItems.push({
									gid: this.mealData[i].goods[j].gid,
									title: this.mealData[i].goods[j].title,
									price: this.mealData[i].goods[j].price,
									amount: 1,
									pack_price: this.mealData[i].goods[j].pack_price,
									dis_amount: 1
								});
							}
						}
					}
					//计算数量
					if (mealItems.length > 0) {
						let newMealItems = []; //套餐里菜品明细的数据
						let simpleMealItems = []; //套餐菜品明细的gid
						let miObj = {};
						for (let i = 0; i < mealItems.length; i++) {
							if (!miObj[mealItems[i].gid]) { //没有重复的菜品
								miObj[mealItems[i].gid] = true;
								newMealItems.push({
									gid: mealItems[i].gid,
									title: mealItems[i].title,
									price: mealItems[i].price,
									amount: mealItems[i].amount,
									pack_price: mealItems[i].pack_price,
									dis_amount: mealItems[i].dis_amount
								});
								simpleMealItems.push({
									gid: mealItems[i].gid
								});
							} else { //有重复的菜品
								if (newMealItems.length > 0) {
									for (let j = 0; j < newMealItems.length; j++) {
										//如果有相同的菜品
										if (mealItems[i].gid == newMealItems[j].gid) {
											newMealItems[j].amount = ++newMealItems[j].amount;
											newMealItems[j].dis_amount = newMealItems[j].amount;
										}
									}
								}
							}
						}

						this.mealItems = newMealItems;
						this.simpleMealItems = simpleMealItems;
					}
				}
			}
		},
		computed: {
			...mapState({
				mealData: state => state.meal.mealData,
				title: state => state.meal.title
			}),
			total() {
				let total = 0;
				for (let i = 0; i < this.mealData.length; i++) {
					for (let j = 0; j < this.mealData[i].goods.length; j++) {
						if (this.mealData[i].goods[j].active) {
							total += parseFloat(this.mealData[i].goods[j].meal_price);
						}
					}
				}
				total = parseFloat(total.toFixed(2));
				return total;
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		min-height: 100%;
		margin: 0 auto;
		background-color: #EFEFEF;
	}

	.page .main {
		width: 95%;
		height: auto;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 6px;
		box-shadow: 3px 3px 5px #e7e7e7;
		overflow: hidden;
	}

	.page .goods-main {
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.page .main .nav {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 1px solid #EFEFEF;
		margin: 0 auto;
	}

	.page .main .nav .icon {
		width: 20rpx;
		height: 45rpx;
		background-color: #f6ab00;
		border-radius: 20px;
		margin-right: 20rpx;
	}

	.page .main .nav .title {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.page .main .goods-wrap {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.page .main .goods-list {
		width: 200rpx;
		height: 317rpx;
		box-shadow: 0px 3px 5px #e7e7e7;
		border-radius: 6px;
		margin-top: 30rpx;
		margin-left: 1%;
		margin-right: 1%;
		position: relative;
	}

	.page .main .goods-list .image {
		width: 160rpx;
		height: 160rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.page .main .goods-list .image image {
		width: 100%;
		height: 100%;
		border-radius: 6px;
	}

	.page .main .goods-list .text {
		width: 160rpx;
		font-size: 24rpx;
		text-align: center;
		white-space: nowrap;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.page .main .goods-list .price {
		text-align: center;
		font-size: 24rpx;
		color: #ff0000;
		margin-top: 5rpx;
	}

	.page .main .goods-list .elc {
		width: 50rpx;
		height: 50rpx;
		border-radius: 100%;
		border: 2px solid #EFEFEF;
		position: absolute;
		right: 0px;
		top: 0px;
		background-color: #FFFFFF;
	}

	.page .main .goods-list .elc.active {
		background-image: url("~@/static/images/goods/right.png");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.cart-main {
		width: 100%;
		height: 100rpx;
		background-color: #f6ab00;
		position: fixed;
		z-index: 90;
		left: 0px;
		bottom: 0px;
		display: flex;
		align-items: center;
		padding: 0px 20rpx;
		box-sizing: border-box;
	}

	.cart-main .total {
		font-size: 28rpx;
		color: #FFFFFF;
		width: 408rpx;
	}

	.cart-main .line {
		width: 2px;
		height: 60rpx;
		background-color: rgba(255, 255, 255, 0.4);
		margin-right: 37rpx;
	}

	.cart-main .cart {
		width: auto;
		height: auto;
		display: flex;
		align-items: center;
	}

	.cart-main .cart .cart-icon {
		width: 60rpx;
		height: 60rpx;
		background-image: url("~@/static/images/goods/cart2.png");
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		margin-right: 25rpx;
	}

	.cart-main .cart .text {
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>